import { connect } from 'dva';
import BaseComponent from '@/components/BaseComponent';
import { Button, Modal, Icon, Upload, Divider } from 'antd';
import Dragger from 'antd/lib/upload/Dragger';
import file from '@/locales/zh-CN/file';
import { Row } from 'antd/es/grid';
@connect(({ user }) => ({
  // data: risk.riskData,
  currentUser: user.currentUser,
}))
class ExcelUpload extends BaseComponent {
  state = {
    visible: false,
    fileList: [],
  };

  openModal = () => {
    this.setState({
      visible: true,
    });
  };

  closeModel = () => {
    this.setState({
      visible: false,
    });
  };

  handleBeforeUpload = (file, fileList) => {
    const { type } = file;
    if (
      type != 'application/pdf' &&
      type != 'image/jpeg' &&
      type != 'image/png' &&
      type != 'image/jpg' &&
      type != 'image/webp'
    ) {
      file.status = 'error';
      console.log(type);

      file.response = '只支持上传pdf格式和图片的文件';
      return false;
    } else {
      const { fileList } = this.state;
      const obj = {
        name: file.name,
        type: file.type,
        isUploading: true,
      };
      fileList.push(obj);
      this.setState({ fileList });
      return true;
    }
  };
  downloadExcelTemplate = () => {
    const a = document.createElement('a');
    a.href =
      'https://wny-upload2.oss-cn-hangzhou.aliyuncs.com/nongai/countryImport/%E9%A3%8E%E9%99%A9%E5%9B%A0%E7%B4%A0%E8%A1%A8%E5%AF%BC%E5%85%A5.xlsx';
    document.body.appendChild(a);
    a.click();
  };

  render() {
    const state = { ...this.state };
    const props = {
      name: 'file',
      action: `/api/cdcerserver/v1/riskfactor/importSelfTestTable?user=${this.props.currentUser.id}`,
      accept: '.xlsx',
      headers: {
        authorization: 'authorization-text',
      },
      onChange: info => {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          this.successMessage(`${info.file.name} 上传成功`);
        } else if (info.file.status === 'error') {
          this.errorMessage(`${info.file.name} 上传失败`);
        }
      },
    };

    return (
      <>
        <Button onClick={this.openModal}> Excel导入</Button>
        <Modal
          visible={state.visible}
          onOk={this.closeModel}
          onCancel={this.closeModel}
          footer={
            <Row>
              <Button onClick={this.closeModel}>取消 </Button>
              <Button onClick={this.downloadExcelTemplate}>下载模板 </Button>
              <Button onClick={this.closeModel} type="primary">
                确认{' '}
              </Button>
            </Row>
          }
        >
          <Dragger {...props}>
            <p className="ant-upload-drag-icon">
              <Icon type="inbox" />
            </p>
            <p className="ant-upload-text">单击或拖动文件到此区域进行上传</p>
          </Dragger>
        </Modal>
      </>
    );
  }
}

export default ExcelUpload;
